<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="../fa/css/all.css">
  <title>Document</title>
</head>

<body>
  <div id="toggleIcon" class="fas fa-toggle-off" onclick="menuToggle()">

  </div>
  <div id="menu-overlay">
    <ul>
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">About</a></li>
      <li><a href="javascript:;">Services</a></li>
      <li><a href="javascript:;">Portfolio</a></li>
      <li><a href="javascript:;">Our Team</a></li>
      <li><a href="javascript:;">Contact</a></li>
    </ul>
  </div>
  <script>
    function menuToggle() {
      let nav = document.getElementById('menu-overlay');
      // 动态修改导航栏class='active'，存在就删除，不存在就创建
      nav.classList.toggle('active');
      let Icon = document.getElementById('toggleIcon');
      // 切换class='fa-toggle-off'，class='fa-toggle-on'
      Icon.classList.toggle('fa-toggle-off');
      Icon.classList.toggle('fa-toggle-on');
    }
  </script>
</body>

</html>